<template>
  <carrier :title="title">
    <div slot="count" class="box">
      <div id="main" style="width: 750px;height:400px; margin-bottom: 50px"></div>
      <div id="main2" style="width: 750px;height:400px;"></div>
    </div>
  </carrier>
</template>

<script>
  import Carrier from 'views/home/Carrier.vue';

  import * as echarts from 'echarts'
  import _ from 'lodash'

  import { getHomeData } from 'network/home.js'

  export default {
    name: 'Report',
    components: {
      Carrier
    },
    data() {
      return {
        title: ['数据统计', '数据报表'],
        options: {
          title: {
            text: '用户来源'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#929292'
              }
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
          },
          xAxis: [
            {
              boundaryGap: false
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ]
      }
      }
    },
    mounted() {
      var myChart = echarts.init(document.getElementById('main'));
      let old_res = {
            "data": {
                "legend": {
                    "data": [
                        "东部地区",
                        "南部地区",
                        "北部地区",
                        "西部地区",
                        "其它"
                    ]
                },
                "yAxis": [
                    {
                        "type": "value"
                    }
                ],
                "xAxis": [
                    {
                        "data": [
                            "2020-12-27",
                            "2020-12-28",
                            "2020-12-29",
                            "2020-12-30",
                            "2020-12-31",
                            "2021-1-1"
                        ]
                    }
                ],
                "series": [
                    {
                        "name": "东部地区",
                        "type": "line",
                        "stack": "总量",
                        itemStyle: {
                          color: '#0e87f1'
                        },
                        "areaStyle": {
                            "normal": {
                              color: '#47a4f5',
                            }
                        },
                        "data": [
                            2999,
                            3111,
                            4100,
                            3565,
                            3528,
                            6000
                        ]
                    },
                    {
                        "name": "南部地区",
                        "type": "line",
                        "stack": "总量",
                        itemStyle: {
                          color: '#c58f05'
                        },
                        "areaStyle": {
                            "normal": {
                              color: '#ffc83d',
                            }
                        },
                        "data": [
                            5090,
                            12500,
                            3400,
                            6000,
                            6400,
                            7800
                        ]
                    },
                    {
                        "name": "北部地区",
                        "type": "line",
                        "stack": "总量",
                        itemStyle: {
                          color: '#37ab0e'
                        },
                        "areaStyle": {
                            "normal": {
                              color: '#61b045',
                            }
                        },
                        "data": [
                            6888,
                            4000,
                            8010,
                            2321,
                            13928,
                            2984
                        ]
                    },
                    {
                        "name": "西部地区",
                        "type": "line",
                        "stack": "总量",
                        itemStyle: {
                          color: '#797979'
                        },
                        "areaStyle": {
                            "normal": {
                              color: '#aba7a7',
                            }
                        },
                        "data": [
                            9991,
                            14130,
                            7777,
                            12903,
                            13098,
                            14028
                        ]
                    },
                    {
                        "name": "其它",
                        "type": "line",
                        "stack": "总量",
                        "areaStyle": {
                            "normal": {}
                        },
                        "data": [
                            5212,
                            5800,
                            15241,
                            14821,
                            5982,
                            14091
                        ]
                    }
                ]
            }
        }
      let res = JSON.parse(JSON.stringify(old_res))
      let result = _.merge(res.data, this.options)
      myChart.setOption(result);
      var myChart2 = echarts.init(document.getElementById('main2'));
      let res2 = {
          "legend": {
            orient: 'vertical',
              "data": [
                  "华东",
                  "华南",
                  "华北",
                  "西部",
                  "其它"
              ]
          },
          "series": [
              {
                  "type": "pie",
                  radius : '62%',
                  center: ['50%', '65%'],
                  minAngle:'15',
                  data:[
                    {name:"东部地区",value: 12999},
                    {name:"南部地区",value: 3111},
                    {name:"北部地区",value: 4100},
                    {name:"西部地区",value: 3565},
                    {name:"其它",value: 6000},
                  ],
                  itemStyle: {
                    normal:{
                        label:{
                            show:true,
                            formatter: "{b} :\n  {c} \n ({d}%)",
                            position:"inner"
                        }
                    }
                }
              },
          ]
      }
      let options = {
          title: {
            text: '消费占比',
          },
          legend: {
            orient: 'vertical',
            left: 'right',
            data: ['东部地区','南部地区','北部地区','西部地区', '其它']
          },
          tooltip: {
            trigger: 'item',
            formatter: "{b} : {c} ({d}%)",
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: 'red'
              }
            }
          },
      }
      myChart2.setOption(_.merge(res2, options))
    },
  }
</script>

<style scoped>

</style>